<template>
	<u-radio-group class="radio-group" :value="radio" size="24" @change="changeRadio">
		<u-radio
			v-for="(item,index) in list"
			:name="item.value"
			:key="index"
			size="18"
			:label="item.text"
			:disabled="disabled"
			:customStyle="{marginRight: '4px'}"
		>
		</u-radio>
	</u-radio-group>
</template>
<script>
	import { queryDictModelByCode } from '../../api/index.js'
	
	export default {
		name: "radio-group",
		data() {
			return {
				list: [],
				radio: '',
			};
		},
		model: {
			prop: 'radios',
			event: 'change'
		},
		props: {
			radios: {
				type: [String, Number],
				default: ''
			},
			dictName: {
				type: String,
				default: '',
				required: true
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			radios(newData){
				this.radio = newData;
			}
		},
		methods: {
			//字典
			queryDictModelByCodesz(name) {
				const params = {
					dictCode: name,
				}
				queryDictModelByCode(params).then(res => {
					if (res.success) {
						this.list = res.result || [];
					}
				})
			},
			//触发
			changeRadio(val){
				if (this.radios === val) {
					return false
				}
				this.$emit('change',val);
			}
		},
		mounted() {
			this.radio = this.radios;
			this.queryDictModelByCodesz(this.dictName);
		}
	}
</script>
<style lang="scss" scoped>
	.radio-group{
		/deep/.u-radio__icon-wrap--disabled{
			border-color: #2979ff;
			background-color: #FFFFFF;
		}
		/deep/.u-radio__icon-wrap--disabled.u-radio__icon-wrap--checked{
			background-color: #2979ff!important;
		}
	}
</style>
